<template>
    <div class="note-list">
        <ul>
            <li v-for="(item,index) in noteList" :key="index" @click="goNoteDetail(item.id)">
                <div class="img">
                    <img :src="item.head_img" alt="">
                </div>
                <div class="time">{{item.c_time}}</div>
                <div class="title">{{ item.title }}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import axios from '@/api/index'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const route = useRoute();
// console.log(route);
const noteList = ref([])

axios.get('/findNoteListByType',{
    params:{
        note_type:route.query.title
    }
}).then(res=>{
    console.log(res);
    noteList.value = res.data;
})
const goNoteDetail = (id) =>{
    router.push({path:'/notedetail',query:{id}})
}
</script>

<style lang="less" scoped>
.note-list{
    width: 100%;
    padding: 1rem 0.667rem 0;
    box-sizing: border-box;
    ul{
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 50px;
        grid-row-gap: 30px;
        li{
            font-size: 0.37rem;
            .img{
                width: 100px;
                height: 4rem;
                border-radius: 0.27rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .title{
                margin-top: 5px;
            }
        }
    }

}
</style>